<template>
  <!-- 主变负载中间底部-tap切换图表 -->
  <div class="echa">
    <v-chart :auto-resize="true" :options="newPolar" />
  </div>
</template>
<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
//loadsh
import lodash from "lodash";

@Component({
  components: {},
})
export default class DutyBottom extends Vue {
  @Prop({ default: () => [] })
  xAxisData: Array<string> | undefined;
  @Prop({ default: () => [] })
  dataList: Array<any> | undefined;
  public polar: Object = {
    title: {
      text: "单位：数量",
      textStyle: {
        align: "center",
        color: "#30ECF4",
        fontSize: 12,
      },
      top: 20,
      right: 30,
    },
    legend: {
      // data: ["高一", "高二", "高三"],
      top: "2%",
      textStyle: {
        color: "white", //坐标的字体颜色
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0, 255, 233,0)",
              },
              {
                offset: 0.5,
                color: "rgba(255, 255, 255,1)",
              },
              {
                offset: 1,
                color: "rgba(0, 255, 233,0)",
              },
            ],
            global: false,
          },
        },
      },
    },
    grid: {
      left: "8%",
      right: "8%",
      bottom: "14%",
      top: "16%",
      // containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [],
      axisLine: {
        show: true,
        // lineStyle: {
        //   color: "rgba(115,129,167,0.8)",
        // },
      },
      splitArea: {
        // show: true,
        color: "#f00",
        lineStyle: {
          color: "#f00",
        },
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        color: "#fff",
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
      splitLine: {
        show: false,
      },
      boundaryGap: false,
      axisTick: {
        show: false,
      },
    },

    yAxis: {
      type: "value",
      // min: 0,
      // name: "单位：数量",
      // nameTextStyle: {
      //   color: "#30ECF4",
      //   align: "right",
      // },
      splitNumber: 4,
      axisLine: {
        show: false,
        lineStyle: {
          color: "white",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLabel: {
        show: true,
        margin: 20,
        textStyle: {
          color: "#d1e6eb",
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: (this as any).xAxisData[0],
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#1A6AD7",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#1A6AD7",
          },
        },
        itemStyle: {
          color: "#1A6AD7",
          borderColor: "#fff",
          borderWidth: 1,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(26,106,215,1)",
                },
                {
                  offset: 1,
                  color: "rgba(26,106,215,0.3)",
                },
              ],
              false
            ),
            // shadowColor: "rgba(108,80,243, 0.9)",
            // shadowBlur: 20,
          },
        },
        data: [],
      },
      {
        name: (this as any).xAxisData[1],
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#17D6E4",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#17D6E4",
          },
        },
        itemStyle: {
          color: "#17D6E4",
          borderColor: "#fff",
          borderWidth: 1,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(23,214,228,1)",
                },
                {
                  offset: 1,
                  color: "rgba(31,214,229,0.3)",
                },
              ],
              false
            ),
            // shadowColor: "rgba(108,80,243, 0.9)",
            // shadowBlur: 20,
          },
        },
        data: [],
      },
      {
        name: (this as any).xAxisData[2],
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#EB6F49",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#EB6F49",
          },
        },
        itemStyle: {
          color: "#EB6F49",
          borderColor: "#fff",
          borderWidth: 1,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(235,111,73,1)",
                },
                {
                  offset: 1,
                  color: "rgba(235,111,73,0.3)",
                },
              ],
              false
            ),
            // shadowColor: "rgba(108,80,243, 0.9)",
            // shadowBlur: 20,
          },
        },
        data: [],
      },
      {
        name: (this as any).xAxisData[3],
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#4CF150",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#4CF150",
          },
        },
        itemStyle: {
          color: "#4CF150",
          borderColor: "#fff",
          borderWidth: 1,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(76,241,80,1)",
                },
                {
                  offset: 1,
                  color: "rgba(76,241,80,0.3)",
                },
              ],
              false
            ),
            // shadowColor: "rgba(108,80,243, 0.9)",
            // shadowBlur: 20,
          },
        },
        data: [],
      },
      {
        name: (this as any).xAxisData[4],
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#F93232",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#F93232",
          },
        },
        itemStyle: {
          color: "#F93232",
          borderColor: "#fff",
          borderWidth: 1,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(249,50,50,1)",
                },
                {
                  offset: 1,
                  color: "rgba(249,50,50,0.3)",
                },
              ],
              false
            ),
            // shadowColor: "rgba(108,80,243, 0.9)",
            // shadowBlur: 20,
          },
        },
        data: [],
      },
      {
        name: (this as any).xAxisData[5],
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#FFC0CB",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#FFC0CB",
          },
        },
        itemStyle: {
          color: "#FFC0CB",
          borderColor: "#fff",
          borderWidth: 1,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(255,192,203,1)",
                },
                {
                  offset: 1,
                  color: "rgba(255,192,203,0.3)",
                },
              ],
              false
            ),
            // shadowColor: "rgba(108,80,243, 0.9)",
            // shadowBlur: 20,
          },
        },
        data: [],
      },
      {
        name: (this as any).xAxisData[6],
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#DE0AE6",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#DE0AE6",
          },
        },
        itemStyle: {
          color: "#DE0AE6",
          borderColor: "#fff",
          borderWidth: 1,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(222,10,230,1)",
                },
                {
                  offset: 1,
                  color: "rgba(222,10,230,0.3)",
                },
              ],
              false
            ),
            // shadowColor: "rgba(108,80,243, 0.9)",
            // shadowBlur: 20,
          },
        },
        data: [],
      },
      {
        name: (this as any).xAxisData[7],
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#FCF920",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#FCF920",
          },
        },
        itemStyle: {
          color: "#FCF920",
          borderColor: "#fff",
          borderWidth: 1,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(252,249,32,1)",
                },
                {
                  offset: 1,
                  color: "rgba(252,249,32,0.3)",
                },
              ],
              false
            ),
            // shadowColor: "rgba(108,80,243, 0.9)",
            // shadowBlur: 20,
          },
        },
        data: [],
      },
      {
        name: (this as any).xAxisData[8],
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#E7EAED",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#E7EAED",
          },
        },
        itemStyle: {
          color: "#E7EAED",
          borderColor: "#fff",
          borderWidth: 1,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(231,234,237,1)",
                },
                {
                  offset: 1,
                  color: "rgba(231,234,237,0.3)",
                },
              ],
              false
            ),
            // shadowColor: "rgba(108,80,243, 0.9)",
            // shadowBlur: 20,
          },
        },
        data: [],
      },
    ],
  };

  get newPolar() {
    let polar = lodash.cloneDeep(this.polar);
    if (this.dataList.length > 0) {
      let robotInspection = this.dataList;
      var ethylene: any[] = [];
      var methane: any[] = [];
      var acetylene: any[] = [];
      var hydrogen: any[] = [];
      var ethane: any[] = [];
      var microwater: any[] = [];
      var oxidation: any[] = [];
      var monooxide: any[] = [];
      var zongtin: any[] = [];
      var xData: any[] = [];
      robotInspection.map((v: any, i: number) => {
        xData[i] = v.time;
        ethylene[i] = 0;
        methane[i] = 0;
        acetylene[i] = 0;
        hydrogen[i] = 0;
        ethane[i] = 0;
        microwater[i] = 0;
        oxidation[i] = 0;
        monooxide[i] = 0;
        zongtin[i] = 0;
        v.data.map((value: any, index: number) => {
          if (value.jclxmc === "乙烯浓度") {
            ethylene[i] = value.val;
          } else if (value.jclxmc === "甲烷浓度") {
            methane[i] = value.val;
          } else if (value.jclxmc === "乙炔浓度") {
            acetylene[i] = value.val;
          } else if (value.jclxmc === "氢气浓度") {
            hydrogen[i] = value.val;
          } else if (value.jclxmc === "乙烷浓度") {
            ethane[i] = value.val;
          } else if (value.jclxmc === "微水含量") {
            microwater[i] = value.val;
          } else if (value.jclxmc === "二氧化碳浓度") {
            oxidation[i] = value.val;
          } else if (value.jclxmc === "一氧化碳浓度") {
            monooxide[i] = value.val;
          } else if (value.jclxmc === "总烃浓度") {
            zongtin[i] = value.val;
          }
        });
      });
      (polar as any).xAxis.data = xData;
      (polar as any).series[0].data = ethylene;
      (polar as any).series[1].data = methane;
      (polar as any).series[2].data = acetylene;
      (polar as any).series[3].data = hydrogen;
      (polar as any).series[4].data = ethane;
      (polar as any).series[5].data = microwater;
      (polar as any).series[6].data = oxidation;
      (polar as any).series[7].data = monooxide;
      (polar as any).series[8].data = zongtin;
    }
    return polar;
  }

  mounted() {
    // console.log(this.xAxisData);
  }
}
</script>
<style lang="scss" scoped>
.echa {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
